<template>
	<view class="content" :style="$theme.pageStyle">
		<nav-bar ref="navBar" :scrollTop="scrollTop" transparentFixedFontColor="#ffffff" type="transparentFixed"
			:title="title">
		</nav-bar>
		<!-- 轮播图 -->
		<image class="cover" mode="aspectFill" :src="OfficeData.images"></image>
		<!-- 门店选择 -->
		<view class="info-container" style="margin-top:-37rpx">
			<view style="display:flex;align-items:center;box-sizing:border-box;">
				<view style="display:flex;flex-direction:column;width:100%;">
					<view style="display:flex;">
						<view class="name">{{OfficeData.name}}</view>
					</view>
					<view class="times">营业时间：{{OfficeData.day_start}} - {{OfficeData.day_end}}</view>
				</view>
				<view style="width:160rpx;height:105rpx;position:relative;margin:auto 0 auto 32rpx;" >
					<image mode="aspectFill" @tap="previewOpen" :src="OfficeData.logo"
						style="z-index:102;width:160rpx;height:105rpx;border-radius:12rpx;"></image>
				</view>
			</view>
			<view class="border"></view>
			<view class="column">
				<view style="flex:1 1 0;">
					<view class="address">{{OfficeData.address}}</view>
				</view>
				<view @tap="openMap(OfficeData.latitude,OfficeData.longitude)" class="navigation" style="width:100rpx;">
					<uni-icons type="location" color="#494f5c" size="16"></uni-icons>
					<view style="margin-left: 5px;">导航</view>
				</view>
				<view style="border-right:1px solid #F1F1F1;height:20px;margin-right: 5px;"></view>
				<view @tap="makePhoneCall(OfficeData.mobile)" class="navigation">
					<uni-icons type="phone" color="#494f5c" size="16"></uni-icons>
					<view style="margin-left: 5px;">电话</view>
				</view>
			</view>
		</view>
		
		<view class="aboutUs" v-if="LawyerList.length != 0">
			<view class="about-title">
				<text>旗下律师</text>
			</view>
			<view class="about-lawyer">
				<u-scroll-list @right="right" @left="left">
					<view class="scroll-list" style="flex-direction: row;">
						<view class="scroll-list__goods-item" v-for="(item, index) in LawyerList" :key="index"
							:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
							@click="toUrl('/pages/lawyer/info?id=' + item.id )">
							<image class="scroll-list__goods-item__image" :src="item.avatar" mode="scaleToFill">
							</image>
							<text class="scroll-list__goods-item__text">{{ item.real_name }}</text>
						</view>
						<view class="scroll-list__show-more">
							<text class="scroll-list__show-more__text">查看更多</text>
							<u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>

		<view class="aboutUs">
			<view class="about-title">
				<text>律师简介</text>
			</view>
			<view class="about-content">
				<u-parse :content="OfficeData.about"></u-parse>
			</view>
		</view>
		
		<view style="height: 50px;">
			
		</view>

	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				id:'',
				navBarHeight: uni.getSystemInfoSync().statusBarHeight,
				navbarTrans: 0,
				scrollTop: 0,
				indicatorDots: !0,
				autoplay: !0,
				interval: 2e3,
				duration: 500,
				shop: '',
				stickyPost: [],
				cases: [],
				page: 1,
				isLastPage: false,
				isloading: true,
				selectUs: [],
				partners: [],
				aboutus: [],
				price: [],
				LawyerList: [],
				loading: true,
				basesetting: '',
				isios: false,
				OfficeData:{},
				title:''
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.getData();
		},
		methods: {
			
			
			async getData() {
				
				 try {
					const res = await $H.post('index/officeinfo', {
						id:this.id
					}, {
						token: false
					});
					this.OfficeData = res.data.office; // 获取数据成功后赋值给 IndexData
					this.title = this.OfficeData.name
					this.OfficeData.address = this.OfficeData.province + this.OfficeData.city + this.OfficeData.area + this.OfficeData.address
					this.LawyerList = res.data.lawyer
					// console.log(this.LawyerList)
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
				
				
			},
			openMap() {
				// console.log()
				// 打开地图，并将门店位置传入
				uni.openLocation({
					latitude: parseFloat( this.OfficeData.latitude),
					longitude: parseFloat( this.OfficeData.longitude),
					name:  this.OfficeData.name,
					address: this.OfficeData.detailed_address,
					scale: 18
				})
			},

			makePhoneCall: function(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			toUrl(url){
				uni.navigateTo({
					url: url
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	
	.teach-box {
		margin: 15px;
	}
	
	.detail_box {
		// margin: 10px;
		// background: #fff;
		// border-radius: 10px;
		// padding: 10px;
		// box-shadow: 0 .2rem 1rem rgba(0, 0, 0, .05);
		// transition: .3s all cubic-bezier(0, 1, 0.95, 1.05);
	
		.detail_detail {
			margin-top: 10px;
		}
	
		.detail_detail_img image {
			width: 100%;
			border-radius: 10px;
			margin-top: 20px;
		}
	
		.aui-flex {
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			padding: 0px 15px 0px 15px;
			position: relative;
			margin-bottom: 15px;
	
			.aui-flex-box {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				min-width: 0;
				font-size: 14px;
				color: #333;
			}
		}
	}
	
	
	.content {
		min-height: 100vh;
		background: #FAFAFA;
	}

	.wx-swiper-dot,
	.wx-swiper-dots.wx-swiper-dots-horizontal {
		height: 8rpx !important;
		width: 8rpx !important;
	}

	.wx-swiper-dots.wx-swiper-dots-horizontal {
		bottom: 46rpx !important;
		left: 48rpx !important;
	}

	.wx-swiper-dot-active {
		border-radius: 15rpx !important;
		height: 8rpx !important;
		margin: auto 0;
		width: 18rpx !important;
	}

	.cover {
		overflow: hidden;
		width: 100%;
	}

	.info-container {
		margin: 20rpx 30rpx 28rpx;
	}

	.case-container,
	.info-container {
		background: #fff;
		border-radius: 28rpx;
		box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, .04);
		padding: 32rpx;
		position: relative;
	}

	.case-container {
		margin: 20rpx;
	}

	.avatar {
		border-radius: 8rpx;
		height: 98rpx;
		margin-right: 20rpx;
		width: 98rpx;
	}

	.name {
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		box-sizing: border-box;
		color: #000;
		display: -webkit-box;
		font-size: 36rpx;
		font-weight: medium;
		font-weight: 500;
		letter-spacing: -0.3rpx;
		line-height: 50rpx;
		max-width: 370rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-word;
	}

	.change {
		background: #f0f0f0;
		border-radius: 30rpx;
		color: #999;
		font-size: 20rpx;
		height: 36rpx;
		line-height: 36rpx;
		margin: auto 0 auto 8rpx;
		padding: 0 12rpx;
		text-align: center;
	}

	.times {
		color: #bdbdbd;
		font-size: 24rpx;
	}

	.border {
		background: url() no-repeat;
		background-size: 100% 100%;
		height: 2rpx;
		margin: 32rpx -32rpx;
	}

	.column {
		-webkit-box-align: center;
		align-items: center;
		display: flex;
		margin-top: 19rpx;
	}

	.address {
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		-webkit-box-flex: 1;
		color: #000;
		display: -webkit-box;
		flex: 1;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-word;
	}

	.guide {
		height: 22rpx;
		margin-left: 16rpx;
		margin-right: 8rpx;
		width: 20rpx;
	}

	.navigation {
		-webkit-box-align: center;
		align-items: center;
		color: #494f5c;
		font-size: 20rpx;
		height: 66rpx;
		overflow: hidden;
		width: fit-content;
	}

	.case,
	.navigation {
		display: flex;
	}

	.case {
		margin: 30rpx 0;
	}

	.image-container {
		width: 650rpx;
		-webkit-box-pack: justify;
		display: flex;
		justify-content: space-between;
	}

	.image2 {
		height: 233rpx;
		width: 320rpx;
	}

	.image2,
	.image3 {
		background-color: #ebebeb;
		border-radius: 8rpx;
		margin-bottom: 16rpx;
	}

	.image3 {
		height: 210rpx;
		width: 210rpx;
	}

	.singleImage {
		background-color: #ebebeb;
		border-radius: 8rpx;
		height: 300rpx;
		margin-bottom: 16rpx;
		width: 650rpx;
	}

	.content-container {
		-webkit-box-flex: 1;
		flex: 1;
	}

	.grey {
		color: #999;
		font-size: 20rpx;
	}

	.black,
	.grey {
		letter-spacing: -0.3rpx;
	}

	.black {
		color: #666;
		font-size: 26rpx;
		margin-bottom: 22rpx;
		white-space: pre-wrap;
	}

	.car {
		color: #000;
		font-size: 28rpx;
		font-weight: 500;
		height: 37rpx;
		line-height: 37rpx;
		margin-bottom: 6rpx;
	}

	.product {
		color: #999;
		line-height: 31rpx;
	}

	.casescount,
	.product {
		font-size: 22rpx;
		letter-spacing: -0.3rpx;
	}

	.casescount {
		color: #666;
	}

	.morecase {
		background: #f8f8f8;
		border-radius: 30rpx;
		color: #494f5c;
		font-size: 24rpx;
		font-weight: medium;
		height: 60rpx;
		letter-spacing: -1px;
		line-height: 60rpx;
		margin-left: 245rpx;
		margin-top: 44rpx;
		padding: 12rpx 0;
		text-align: center;
		width: 223rpx;
	}

	.morepic {
		backdrop-filter: blur(4rpx);
		background: hsla(0, 0%, 100%, .04);
		border-radius: 20rpx;
		bottom: 8rpx;
		color: #fff;
		font-size: 20rpx;
		letter-spacing: -.3px;
		padding: 4rpx 12rpx;
		position: absolute;
		right: 8rpx;
		text-align: center;
	}

	.triangleicon {
		height: 10rpx;
		margin-left: 8rpx;
		vertical-align: middle;
		width: 15rpx;
	}

	.timeicon {
		height: 22rpx;
	}

	.phoneicon,
	.timeicon {
		margin-right: 11rpx;
		vertical-align: middle;
		width: 20rpx;
	}

	.phoneicon {
		height: 20rpx;
	}

	.locicon {
		height: 23rpx;
		margin-right: 11rpx;
		vertical-align: middle;
		width: 20rpx;
	}

	.polygon {
		height: 10rpx;
		margin-bottom: 4rpx;
		margin-left: 4rpx;
		width: 7rpx;
	}

	.underline {
		background: #fff1c0;
		border-radius: 20rpx;
		bottom: 0;
		height: 16rpx;
		position: absolute;
		width: 100%;
	}

	.addCase {
		background: #fbe45a;
		border-radius: 47rpx;
		color: #202020;
		font-size: 20rpx;
		height: 44rpx;
		line-height: 44rpx;
		position: absolute;
		right: 52rpx;
		text-align: center;
		vertical-align: middle;
		width: 120rpx;
	}

	.popUp {
		background-color: #fff;
		border-radius: 30rpx;
		font-size: 28rpx;
		height: fit-content;
		padding: 48rpx;
		width: 540rpx;
	}

	.cancel {
		color: #666;
		line-height: 58rpx;
		text-align: center;
	}

	.cancel,
	.confirm {
		border-radius: 8rpx;
		font-size: 24rpx;
		height: 58rpx;
		margin-right: 0;
	}

	.confirm {
		background: #fbe45a;
		color: #202020;
		margin-left: 20rpx;
	}

	.confirm:after {
		border: none;
	}

	.nocase {
		color: #999;
		font-size: 24rpx;
		height: 280rpx;
		line-height: 280rpx;
		text-align: center;
		width: 100%;
	}

	.dynamic {
		margin: 20rpx 0rpx;
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
	}

	.scroll {
		white-space: nowrap;
		width: 100%;
	}

	.card,
	.scroll_box {
		display: flex;
	}

	.card {
		border-radius: 28rpx;
		box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, .04);
		background: #fff;
		flex-direction: column;
		flex-shrink: 0;
		height: 530rpx;
		justify-content: space-between;
		margin-left: 30rpx;
		width: 400rpx;
	}


	.card .card_img {
		border-radius: 28rpx 28rpx 0 0;
		height: 350rpx;
		width: 400rpx;
	}

	.card_content {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	.card_content .time {
		border-top: 1px solid #000;
		color: #000;
		display: inline-block;
		font-size: 22rpx;
		font-weight: 700;
		line-height: 45rpx;
		overflow: hidden;
		padding-right: 20rpx;
		position: relative;
		text-align: center;
		width: 260rpx;
	}

	.time:before {
		left: calc(100% - 10px);
		transform: rotate(-69deg) translate(-1px, 0);
		transform-origin: 0 0;
		width: 100%;
	}

	.time:after,
	.time:before {
		border-top: 1px solid #000;
		bottom: 0;
		content: "";
		display: block;
		position: absolute;
	}

	.time:after {
		left: 0;
		width: calc(100% - 10px);
	}

	.card_content .content_tit {
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #333;
		display: block;
		display: -webkit-box;
		font-size: 26rpx;
		height: 70rpx;
		line-height: 35rpx;
		margin: 25rpx 0;
		overflow: hidden;
		padding: 0 30rpx;
		text-overflow: ellipsis;
		white-space: pre-line;
	}

	.card_content .img {
		height: 28rpx;
		margin-left: 30rpx;
		width: 80rpx;
	}

	.title {
		align-items: flex-end;
		display: flex;
		padding: 30rpx;
		width: 100%;
	}

	text,
	view {
		box-sizing: border-box;
	}

	.title .t1 {
		color: #333;
		font-size: 38rpx;
		font-weight: 700;
	}

	.title .t2 {
		color: #444;
		font-size: 28rpx;
		font-weight: 500;
		padding-left: 10rpx;
	}


	.navbar {
		box-sizing: border-box;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 999999;
	}

	.navbar_navigation {
		align-items: center;
		display: flex;
		height: 44px;
		margin-left: 30rpx;
		// width: calc(100%-30rpx);
	}

	.navbar_navigation text {
		font-size: 32rpx;
		font-weight: bolder;
	}

	.aboutUs {
		margin: 30rpx;
		background: #fff;
		padding: 30rpx;
		border-radius: 28rpx;
		box-shadow: 0 4rpx 16rpx 0 rgba(0, 0, 0, .04);
	}

	.about-title {
		font-size: 18px;
		font-weight: 500;
		padding: 20rpx 0rpx;
	}

	.about-content {
		font-size: 28rpx;
		color: #5d5d5d;
	}

	.btn-common {
		background-color: #007aff;
		position: relative;
		z-index: 1;
		color: #fff;
		width: 300rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		margin: 30rpx 0;
		text-transform: uppercase;
	}

	.selectUs {
		padding-top: 30rpx;
	}

	.selectUs-item {
		margin: 20rpx 0 20rpx 20rpx;
		width: 360rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.2s linear, box-shadow 0.2s linear;
	}

	.selectimage {
		width: 360rpx;
		height: 200rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.select-info {
		padding: 20rpx;
	}

	.select-title {
		font-size: 38rpx;
		font-weight: 500;
		padding-bottom: 20rpx;
	}

	.select-content {
		width: 320rpx;
		word-wrap: break-all;
		white-space: pre-wrap;
		padding-bottom: 20rpx;
		font-size: 28rpx;
		color: #5d5d5d;
	}

	.partners-content {
		margin: 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.partners-item {
		border-radius: 20rpx;
		width: 340rpx;
		text-align: center;

	}

	.partners-image {
		border-radius: 20rpx;
		width: 340rpx;
		height: 140rpx;
		background: #fff;
	}

	.partnersimage {
		width: 140rpx;
		height: 140rpx;
	}

	.partners-title {
		font-size: 28rpx;
		padding: 10rpx;
	}

	.price-item {
		margin: 30rpx;
		padding-bottom: 60rpx;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		transition: transform 0.2s linear, box-shadow 0.2s linear;
	}

	.price-cover {
		width: 690rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.price-section {
		align-items: center;
		text-align: center;
		margin: 30rpx;
	}

	.price-title {
		font-size: 38rpx;
		margin: 10rpx;
	}

	.price-info {
		font-size: 56rpx;
		font-weight: 600;
		margin: 10rpx;
	}

	.btn-commons {
		background-color: #007aff;
		position: relative;
		z-index: 1;
		color: #fff;
		width: 300rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		margin: 0rpx auto;
		text-transform: uppercase;
	}

	.price-button {
		margin-top: 30rpx;
	}

	.price-features {
		font-size: 28rpx;
		color: #999;
	}

	.price-features-item {
		padding-top: 10rpx;
	}
	
	
	.scroll-list {
		@include flex(column);
	
		&__goods-item {
			margin-right: 20px;
	
			&__image {
				width: 80px;
				height: 80px;
				border-radius: 4px;
			}
	
			&__text {
				color: #000;
				display: flex;
				justify-content: center;
				height: 20px;
				font-size: 14px;
				line-height: 16px;
				margin-top: 5px;
				font-weight: 500;
			}
		}
	
		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;
	
			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}
	
</style>
